<template>
	<view>
		<view>
			<view @click="toggleFun" class="list_explain">
				<text class="list_top_explain">七天内收藏</text>
				<uni-icons :type="arrow" size="20"></uni-icons>
			</view>
			<view class="reportType_btns" v-if="toggle">
				<view class="classTab" v-for="(item, index) in list" :key="index">
					<view class="img" @click="handle(item)"><img :src="item.imgUrl" /></view>
					<text class="title">{{ item.className }}</text>
					<view class="collect">
						<view class="item" @click="start(item.likeType, item.classId)">
							<image :src="img1"></image>
							<view>{{ item.favoriteNum }}</view>
						</view>
						<view class="item" @click="handle(item)">
							<image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/interaction/eye.png"></image>
							<view>{{ item.viewNum }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view @click="toggleMoreFun" class="list_explain">
				<text class="list_top_explain">更早收藏</text>
				<uni-icons :type="arrow1" size="20"></uni-icons>
			</view>
			<view class="reportType_btns" v-if="toggleMore">
				<view class="classTab" v-for="(item, index) in moreList" :key="index" @click="handle(item)">
					<view class="img"><img :src="item.imgUrl" /></view>
					<text class="title">{{ item.className }}</text>
					<view class="collect">
						<view class="item" @click="start(item.likeType, item.classId)">
							>
							<image :src="item.likeType == '2' ? img : img1"></image>
							<view>{{ item.favoriteNum }}</view>
						</view>
						<view class="item">
							<image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/interaction/eye.png"></image>
							<view>{{ item.viewNum }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '@/common/request.js';
import { getCommonShareInfo } from '@/common/utils.js';
export default {
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	data() {
		return {
			toggle: true,
			toggleMore: false,
			arrow: 'arrowdown',
			arrow1: 'arrowup',
			active: -1,
			moreList: [],
			list: [],
			img: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/interaction/start.png',
			img1: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/interaction/startActive.png'
		};
	},
	mounted() {
		this.classList();
	},
	methods: {
		handle(item) {
			http('/api/subjectClass/watch', {
				method: 'post',
				data: {
					classId: item.classId
				}
			}).then(result => {
				item.viewNum = item.viewNum + 1;
				uni.navigateTo({
					url: 'webView?url=' + encodeURIComponent(item.classUrl),
					animationType: 'pop-in',
					animationDuration: 200
				});
			});
		},
		classList() {
			http('/api/subjectClass/favoritesList', {
				data: {},
				method: 'GET'
			}).then(
				result => {
					let data = result.data;
					this.list = data.favoritesList;
					this.moreList = data.favoritesMoreList;
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		start(likeType, id) {
			if (likeType == '1') {
				likeType = '2';
			} else {
				likeType = '1';
			}
			http('/api/subjectClass/favorites', {
				data: { classId: id, likeType: likeType },
				method: 'POST'
			}).then(
				result => {
					if (result.code == '200') {
						this.classList();
					}
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		toggleFun() {
			this.toggle = !this.toggle;
			this.arrow = this.toggle ? 'arrowup' : 'arrowdown';
		},
		toggleMoreFun() {
			this.toggleMore = !this.toggleMore;
			this.arrow1 = this.toggleMore ? 'arrowdown' : 'arrowup';
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #f7f7f7;
}
.uni-icons {
	color: #66645d !important;
	font-size: 32rpx !important;
}
.list_explain {
	width: 100%;
	height: 88rpx;
	background: #fff;
	line-height: 88rpx;
	font-size: 36rpx;
	color: #66645d;
	padding: 0 40rpx;
	display: flex;
	justify-content: space-between;
	margin: 0rpx 0 24rpx 0;
	.list_top_explain {
	}
}
.reportType_btns {
	display: flex;
	flex-wrap: wrap;
	margin: 0 24rpx;
	.classTab {
		margin: 0rpx 12rpx 25rpx 12rpx;
		background: #fff;
		border-radius: 12rpx;
		.img {
			height: 140rpx;
			width: 322rpx;
			margin-bottom: 20rpx;
			img {
				height: 140rpx;
				width: 100%;
				border-radius: 12rpx 12rpx 0 0;
			}
		}
		.title {
			padding: 18rpx 24rpx;
			font-size: 30rpx;
			color: #66645d;
			width: 290rpx;
			overflow: hidden;
			// text-overflow:ellipsis;
			white-space: nowrap;
			display: block;
		}
		.collect {
			color: #b2b1ae;
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 35rpx 20rpx 25rpx 20rpx;
			.item {
				display: flex;
				align-items: center;
				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
			}
		}
	}
}
</style>
